<template>
  <div class="sgh-input-container">
    <Label :value="labelVal" :name="name" />
    <input
      class="sgh-input"
      :id="name"
      :type="type"
      :placeholder="placeholder"
      :value="defaultValue"
      :style="getStyles()"
      :name="name"
      ref="inputVal"
      @click.stop="_click"
      :disabled="isDisable"
      @keydown.enter="_enter($refs.inputVal.value)"
    />
    <span
      class="input-icon"
      v-if="icon"
      v-html="icon"
      @click.stop="_iconClick($refs.inputVal.value)"
    ></span>
  </div>
</template>

<script>
import Label from "@/components/Label/index.vue";
export default {
  props: [
    "type",
    "placeholder",
    "defaultValue",
    "icon",
    "name",
    "labelVal",
    "maxWidth",
    "isDisable",
  ],
  components: {
    Label,
  },
  data() {
    return {
      
    }
  },
  methods: {
    getStyles() {
      return `min-width: ${this.maxWidth}`;
    },
    _click() {
      this.$emit("onClick");
    },
    _iconClick(keyword) {
      this.$emit("onIconClick",keyword);
    },
    _enter(keyword){
      this.$emit('onEnter',keyword);
    },
  },
};
</script>

<style lang="scss">
$part-bg-color: #2d3838;
$theme-green-color: #48aa4e;
$font-color: #999;
$border-gray-color: #474747;
.sgh-input-container {
  position: relative;
  .sgh-input {
    outline: none;
    border: 1px solid $border-gray-color;
    background-color: $part-bg-color;
    border-radius: 4px;
    height: 30px;
    width: 200px;
    padding: 0 5px;
    color: $font-color;
    font-size: 12px;
    &:hover {
      border-color: $theme-green-color;
    }
    &:focus {
      border-color: $theme-green-color;
      box-shadow: 0 0 4px 0 $theme-green-color;
    }
  }
  .input-icon {
    position: absolute;
    top: calc(50% - 7.5px);
    left: calc(200px - 15px);
    cursor: pointer;
    svg {
      width: 15px;
      height: 15px;
      path {
        fill: $font-color;
      }
    }
    &:hover {
      svg > path {
        fill: $theme-green-color;
      }
    }
  }
  input:disabled {
    cursor: no-drop;
  }
}
</style>